<template>
  <PageWrapper dense>
    <CollapseContainer title="产品信息">
      <BasicForm @register="registerForm">
        <!-- 标签 -->
        <template #spuKeyWord>
          <template v-for="tag in state.spuKeyWord" :key="tag">
            <Tooltip v-if="tag.length > 20" :title="tag">
              <Tag :closable="true" color="blue" @close="handleClose(tag)">
                {{ `${tag.slice(0, 20)}...` }}
              </Tag>
            </Tooltip>
            <Tag v-else :closable="true" color="blue" @close="handleClose(tag)">
              {{ tag }}
            </Tag>
          </template>
          <Input v-if="state.inputVisible" ref="inputRef" type="text" size="small" :style="{ width: '78px' }"
            v-model:value="state.inputValue" @blur="handleInputConfirm" @keyup.enter="handleInputConfirm" />
          <Tag v-else @click="showInput" style="background: #fff; border-style: dashed">
            <plus-outlined />
            新增标签
          </Tag>
        </template>
        <!-- 产品尺寸 -->
        <template #spuSize>
          <Space>
            <a-input v-model:value="state.spuExtraInfo.spuLength" style="width: 250px;">
              <template #addonBefore>
                <Select v-model:value="state.spuExtraInfo.spuLengthType" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_SIZE)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.spuLengthUnit" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
            <a-divider type="vertical">X</a-divider>
            <a-input v-model:value="state.spuExtraInfo.spuWidth" style="width: 250px;">
              <template #addonBefore>
                <Select v-model:value="state.spuExtraInfo.spuWidthType" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_SIZE)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.spuWidthUnit" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
            <a-divider type="vertical">X</a-divider>
            <a-input v-model:value="state.spuExtraInfo.spuHeight" style="width: 250px;">
              <template #addonBefore>
                <Select v-model:value="state.spuExtraInfo.spuHeightType" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_SIZE)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
              <template #addonAfter>
                <Select v-model:value="state.spuExtraInfo.spuHeightUnit" style="width: 80px">
                  <SelectOption v-for="item in getDictOptions(DictEnum.SPU_UNIT)" :key="item.value">{{ item.label }}
                  </SelectOption>
                </Select>
              </template>
            </a-input>
          </Space>
        </template>
        <!-- 产品重量 -->
        <template #spuWeight="{ model, field }">
          <a-input v-model:value="model[field]">
            <template #addonAfter>
              lbs
            </template>
          </a-input>
        </template>
      </BasicForm>
    </CollapseContainer>
  </PageWrapper>
</template>

<script setup lang="ts">
import { BasicForm, useForm } from '@/components/Form';
import { onMounted, ref, reactive, nextTick } from 'vue';
import { drawerSchemas } from '../product.data';
import { Tag, Tooltip, Input, Select, Space, Tabs } from 'ant-design-vue';
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';
import { DictEnum } from '@/enums/dictEnum';
import { getDictOptions } from '@/utils/dict';
defineOptions({ name: 'baseInfoEdit' });
const SelectOption = Select.Option;
const [registerForm, { setFieldsValue, validate }] = useForm({
  // layout: 'vertical',
  labelWidth: 100,
  name: 'user-drawer',
  showActionButtonGroup: false,
  baseColProps: { span: 12 },
  schemas: drawerSchemas,
});
const inputRef = ref();
const state = reactive({
  spuKeyWord: [],
  inputVisible: false,
  inputValue: '',
  spuExtraInfo: {
    spuLength: '',
    spuLengthType: '',
    spuLengthUnit: '',
    spuWidth: '',
    spuWidthType: '',
    spuWidthUnit: '',
    spuHeight: '',
    spuHeightUnit: '',
    spuHeightType: '',
  }
});
const handleClose = (removedTag: string) => {
  const spuKeyWord = state.spuKeyWord.filter((tag) => tag !== removedTag);
  state.spuKeyWord = spuKeyWord;
};

const showInput = () => {
  state.inputVisible = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};

const handleInputConfirm = () => {
  const inputValue = state.inputValue as never;
  let spuKeyWord = state.spuKeyWord;
  if (inputValue && spuKeyWord.indexOf(inputValue) === -1) {
    spuKeyWord = [...spuKeyWord, inputValue];
  }
  Object.assign(state, {
    spuKeyWord,
    inputVisible: false,
    inputValue: '',
  });
};
async function handleSubmit() {
  try {
    const data = {
      ...(await validate()),
      ...state.spuExtraInfo,
      spuKeyWord: state.spuKeyWord.join(','),
    };
    return data
  } catch (e) {
    console.log('e', e);
  } finally {
  }
}
const setFormData = (data: any) => {
  data.spuTypeId = data.spuTypeId ? data.spuTypeId.toString() : '';
  data.topicId = data.topicId ? data.topicId.toString() : '';
  setFieldsValue(data);
  state.spuKeyWord = data.spuKeyWord ? data.spuKeyWord.split(',') : [];
  state.spuExtraInfo = {
    spuLength: data.spuLength || '',
    spuLengthType: data.spuLengthType || '',
    spuLengthUnit: data.spuLengthUnit || '',
    spuWidth: data.spuWidth || '',
    spuWidthType: data.spuWidthType || '',
    spuWidthUnit: data.spuWidthUnit || '',
    spuHeight: data.spuHeight || '',
    spuHeightUnit: data.spuHeightUnit || '',
    spuHeightType: data.spuHeightType || '',
  };
};
defineExpose({ handleSubmit, setFormData });
</script>
